<template>
    <div class="app-container">

        <div class="search-container" ref="search">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="default">
                <el-form-item label="巡查点名称" prop="name">
                    <el-input v-model="queryParams.name" placeholder="请输入巡查点名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="queryParams.address" placeholder="请输入详情位置" clearable></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="last_time_sta">
                    <el-date-picker class="w-200" v-model="queryParams.last_time_sta" type="datetime" placeholder="选择日期"
                        value-format="YYYY-MM-DD hh:mm:ss"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="last_time_end">
                    <el-date-picker class="w-200" v-model="queryParams.last_time_end" type="datetime" placeholder="选择日期"
                        value-format="YYYY-MM-DD hh:mm:ss"></el-date-picker>
                </el-form-item>
                <el-form-item label="最后一次巡查结果" prop="patrol_status">
                    <el-select v-model="queryParams.patrol_status" placeholder="请选择" clearable>
                        <el-option label="合格" value="0"></el-option>
                        <el-option label="超期" value="1"></el-option>
                        <el-option label="不合格" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getLists">搜索</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>


        <el-card shadow="never">
            <template #header>
                <el-button size="default" @click="goBack" type="primary">返回</el-button>
            </template>

            <el-table :height="pageHeight + 'px'" :data="tableData" style="width: 100%;">
                <el-table-column label="巡查点名称" prop="name"> </el-table-column>
                <el-table-column label="地址" prop="address"> </el-table-column>
                <el-table-column label="巡查号" prop="number"> </el-table-column>
                <el-table-column label="责任人" prop="patrol_user_name"> </el-table-column>
                <el-table-column label="责任人联系电话" prop="phone"> </el-table-column>
                <el-table-column label="是否含有设备" prop="has_device" :formatter="isHasDevice"> </el-table-column>
                <el-table-column label="二维码" prop="qr_src">
                    <template #default="scope">
                        <div class="qr-wrapper" @click="showQrCodeDetail(scope.row)">
                            <img :src="upDataUrl + scope.row.qr_src" class="qr-img" />
                            <span class="qr-tip">点击查看</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark"> </el-table-column>
                <el-table-column>
                    <template #default="scope">
                        <el-button size="mini" @click="checkDanger(scope.$index, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                <!-- 编辑删除 -->
                <el-table-column width="150" label="操作">
                    <template #default="scope">
                        <!-- <el-button size="mini" type="primary" @click="editPoint(scope.row)">编辑</el-button> -->
                        <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon="el-icon-info"
                            icon-color="red" title="确定删除？" @confirm="delPoint(scope.row.id)" @cancel="cancelEvent">
                            <template #reference>
                                <el-button size="mini" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" v-model:currentPage="tableDataInfo.page"
                    :page-count="tableDataInfo.total_page" :total="tableDataInfo.total"
                    layout="total,prev, pager, next, jumper" background>
                </el-pagination>
            </div>
        </el-card>
        <el-dialog v-model="qrModalVisible" width="18%" center="true" @close="closeDialog"
            :close-on-click-modal="false">
            <div class="qr-modal-wrapper" ref="qrImg">
                <img :src="upDataUrl + qrModalData.qrSrc" class="qr-modal-img" />
                <span>{{ qrModalData.qrCode }}</span>
                <span>巡查点位：{{ qrModalData.unitName }}</span>
                <span>单位名称：{{ qrModalData.name }}</span>
            </div>
            <div class="qr-modal-download">
                <el-button type="primary" @click="downloadQrImg">点击下载</el-button>
            </div>
        </el-dialog>
        <el-dialog v-model="pointLogDialog" width="70%" destroy-on-close>
            <pointLogList :point_id="pointId"></pointLogList>
        </el-dialog>

    </div>
</template>
<script>
import html2canvas from 'html2canvas'
import pointLogList from '@/views/sociolUnitMange/pointLogList.vue'
export default {
    components: {
        pointLogList
    },
    data() {
        return {
            tableData: [],
            search: '',
            tableDataInfo: '',
            unit_id: '',
            from: '',
            qrModalVisible: false,
            qrModalData: {},
            upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
            pointId: '',
            pointLogDialog: false,
            queryParams: {},
            pageHeight: 0,
            page: 1,
            pageSize: 10
        }
    },
    created() {
        if (this.$route.query.unitIdFromChild) this.unitIdFromChild = this.$route.query.unitIdFromChild
        if (this.$route.query.from) this.from = this.$route.query.from
        this.getLists()
    },
    mounted() {
        this.pageHeight = window.innerHeight - this.$refs.search.clientHeight - 270;
    },
    methods: {
        // 重置form
        resetQuery() {
            this.page = 1;
            this.$refs['queryFormRef'].resetFields();
            this.getLists()
        },
        goBack() {
            this.$router.go(-1)
        },
        isHasDevice(row, column, cellValue, index) {
            let temp = ['无设备', '有设备']
            return temp[cellValue]
        },
        downloadQrImg() {
            let that = this
            html2canvas(that.$refs.qrImg).then((canvas) => {
                let _url = canvas.toDataURL()
                fetch(_url)
                    .then(function (res) {
                        return res.blob()
                    })
                    .then(function (blob) {
                        var a = document.createElement('a'),
                            url = window.URL.createObjectURL(blob)
                        a.href = url
                        a.download = '二维码'
                        a.click()
                    })
            })
        },
        showQrCodeDetail(data) {
            this.qrModalVisible = true
            this.qrModalData = {
                name: data.name,
                qrSrc: data.qr_src,
                qrCode: data.qr_code
            }
            if (this.from !== 'unit_child') {
                //子单位
                this.qrModalData.unitName = data.unit_name
            } else {
                this.qrModalData.unitName = data.sub_unit_name
            }
        },
        hiddenDangerFrom(row, column, cellValue, index) {
            let temp = ['', '公众', '监管机构', '维保单位', '社会单位']
            return temp[cellValue]
        },
        hiddenDangerStatus(row, column, cellValue, index) {
            let temp = ['', '未整改', '待审核', '已整改']
            return temp[cellValue]
        },
        getLists() {

            let query = {
                page: this.page,
                rows: this.pageSize,
                ...this.queryParams
            }

            query.sub_unit_id = this.$route.query.id

            this.$api.post('/unit/PatrolPosition/lists', query).then((res) => {
                console.log(res)
                this.tableData = res.data.lists
                this.tableDataInfo = res.data
            })
        },
        // 删除
        delPoint(id) {
            this.$api.post('/unit/PatrolPosition/delete', { id: e }).then((res) => {
                this.$message({
                    showClose: true,
                    message: '删除成功',
                    type: 'success'
                })
                this.getLists()
            })
        },
        handleSizeChange(e) {
            this.pageSize = e;
            this.getLists()
        },
        handleCurrentChange(e) {
            this.page = e;
            this.getLists()
        },
        checkDanger(index, row) {
            this.pointId = row.id
            this.pointLogDialog = true
        }
    }
}
</script>
<style scoped>
.block {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.qr-wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    cursor: pointer;
}

.qr-img {
    width: 80px;
    height: 80px;
}

.qr-tip {
    width: 80px;
    text-align: center;
}

.qr-tip:hover {
    color: #5482ee;
    text-decoration: underline;
}

.qr-modal-wrapper {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 30px;
}

.qr-modal-wrapper span {
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 24px;
}

.qr-modal-img {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.qr-modal-download {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30px;
}
</style>
